<template>
  <van-form class="form" @submit="handleSubmit">
    <van-field name="uploader" label="头像">
      <template #input>
        <van-uploader v-model="avatar" :preview-image="false" />
      </template>
    </van-field>
    <van-field
      v-model="nickname"
      type="text"
      required
      name="username"
      clearable
      label="昵称"
      placeholder="昵称"
      :rules="[{ required: true, message: '请输入昵称!' }]"
    />
    <van-field
      v-model="phone"
      type="tel"
      required
      name="username"
      clearable
      label="手机号码"
      placeholder="手机号码"
      :rules="[{ required: true, message: '请输入手机号码!' }]"
    />
    <div class="m-5 flex justify-center">
      <van-button round class="h-[45px] w-[210px] rounded-full flex justify-center items-center text-[#fff] bg-[#2e7cff] active:bg-[#3c85ff] text-base my-10 m-auto" type="primary" native-type="submit">
        保存修改
      </van-button>
    </div>
  </van-form>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Links from './components/Links.vue'
import { useUpdateEffect } from './hooks/useUpdateEffect'

export default defineComponent({
  components: { Links },
  name: 'MainUpdate',
  setup() {
    const {
      avatar,
      nickname,
      phone,
      handleSubmit
    } = useUpdateEffect()

    return {
      avatar,
      nickname,
      phone,
      handleSubmit
    }
  }
})
</script>
